<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.12.4.js">
		</script>
		<style type="text/css">
			div {
				margin: 0px 0px 10px 0px;
			}
			
			#div1 {
				width: 100px;
				height: 100px;
				border: 1px solid saddlebrown;
			}
			
			#div2,
			#div3 ,#div4{
				width: 100px;
				height: 100px;
				border: 1px solid saddlebrown;
			}
			#div4{
				background: red;
			}
		</style>
	</head>

	<body>
		<div id="div1">div1</div>
		<div id="div2">div2</div>
		<div id="div3">div3</div>
		<div id="div4">div4</div>
		用户名：<input type="text" name="name" />
		<script type="text/javascript">
			$("#div1").click(function() {
				$("#div2").css("background", "green")
				$(this).css("background", "red")
			})
			$("#div1").mouseover(function() {
				$("#div2").hide(1000, function() {
					$("#div1").css("background", "orange")
				})
			})
			$("#div2").mouseout(function() {
				$(this).show(1000, function() {
					$("#div1").css("background", "white")
				})
			})
			$("input").keydown(function() {
				$(this).val("按下啦~");
				$("#div1").css("background", "white")
			})
			$("input").keyup(function() {
				$(this).val("抬起啦~");
				$("#div1").css("background", "#FFA500")
				//控制台事件
				//console.log("鼠标离开");
			})
			//回车
			$(document).keydown(function(e) {
				if(e.keyCode == "13") {
					alert("回车")
				} else {
					//alert(e.keyCode)
				}
			})
			//浏览器大小
			$(window).resize(function() {
				alert("调整了浏览器大小")
			})
			//绑定事件bind
			$("#div3").bind("click", function() {
				$(this).css("background", "#FFFF00")
			})
			//绑定多个事件
			$("#div3").bind({
				mouseover: function() {
					$("#div1").hide(500);
				},
				mouseout: function() {
					$("#div1").show(500)
				}
			})
			//移除事件
			$("#div3").unbind("click")
			//移除所有事件
			$("#div3").unbind();
			//复合事件
			$("#div3").hover(function(){
				$(this).css("background","red")
			},function(){
				$(this).css("background","green")
			})
			//连续点击
			/*$("#div3").toggle(function(){
				$(this).css("background","red")
			},function(){
				$(this).css("background","#0000FF")
			},function(){
				$(this).css("background","#8B4513")
			})*/
			//淡入淡出
			$("#div3").hover(function(){
				$("#div4").fadeOut(1000)
			},function(){
				//$("#div4").fadeIn(1000)
				$("#div4").slideDown(1000)
				$("#div4").css("background","red")
			});
		</script>
	</body>

</html>